<template>
  <div class="map-container" ref="chartsDom"></div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
//@ts-ignore,引入china_map地图json数据
import china_map_json from "./china_map.json";
//引入请求函数
import { reqUserAddressList } from "@/api/screen/index";


//获取原生dom
let chartsDom = ref();

//@ts-ignore注册中国地图
echarts.registerMap("china",china_map_json);

//地图配置项
const mapOptions = {
    //地图组件
    geo:{
      map:"china",  //中国地图
      roam:true,  //是否支持鼠标缩放
      //地图位置调试
      left:0,
      top:0,
      right:0,
      bottom:0,
      //地图文字设置
      label:{
        show:true,
        color:"white"
      },
      //每一个多边形的样式
      itemStyle:{
        color:'skyblue',
        emphasis: {  // 设置高亮样式
          areaColor: 'red'
        }
      },
      regions: [  // 单独设置某个省份的样式
            {
              name: '广东省',
              itemStyle: {
                areaColor: 'gray'
              }
            },
            {
              name:"江苏省",
              itemStyle:{
                areaColor:"blue",
              }
            },
            {
              name:"台湾省",
              itemStyle:{
                areaColor:"green"
              }
            }
      ]
    }
}

//绘制中国地图
const drawMap = () => {
  let mycharts = echarts.init(chartsDom.value);
  mycharts.setOption(mapOptions)
}

//请求平台会员用户的所有收货地址信息
async function getUserAddressList () {
  let addressList:any = [];  //地址信息
  let res = await reqUserAddressList();
  if(res.code === 200){
    addressList = res.data.rows.map(item => item.linkAddress);
  } else {
    //自定义几个地址信息
    addressList = ['江西省','台湾省','广东省2'];
  }
  //对地址信息进行正则匹配:筛选出省份
  let provinceListInfo:any = [];
  const regex = /^(.*?省|.*?自治区|.*?特别行政区)(.*?市|.*?自治州|.*?地区|.*?盟)(.*?区|.*?县|.*?市|.*?旗|.*?海域|.*?岛)/;
  for(let i = 0; i < addressList.length; i++){
    let match = addressList[i].match(regex);
    if (match) {
      let province = match[1] || '';
      let city = match[2] || '';
      let district = match[3] || '';
      //添加非重复的省份
      if(!provinceListInfo.some(e => e == province)){
        provinceListInfo.push(province);
      }
    }
  }
  console.log('获取所有用户地址信息api',res);
  //console.log(provinceListInfo);
  //颜色枚举
  const colorList = ['gray','blue','green','beige','coral','cyan','darkslategray','deepskyblue','floralwhite','hotpink','lightsteelblue','red','yellow','black','white'];
  //生成省份配置项
  let regionsOptions:any = [];
  for(let j = 0; j < provinceListInfo.length; j ++){
    regionsOptions.push({
      name:provinceListInfo[j],
      itemStyle:{
        areaColor:colorList[Math.floor(Math.random() * colorList.length + 1)]
      }
    });
  }
  //输出配置项
  //console.log(regionsOptions);
  mapOptions.geo.regions = regionsOptions;
  //绘制地图
  drawMap();
}

//生命周期
onMounted(()=>{
  //获取用户所在省份信息并初始化地图
  getUserAddressList();
})

</script>
<script lang="ts">
  export default {
      name:"Map"
  }
</script>
<style lang="css">
  .map-container{
    width: 1100px;
    height: 900px;
  }
</style>